<!DOCTYPE html>
<html>
<head>
    <title>Msquare</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="welcome to Msquare"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    <link href="/static/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- pop-up -->
    <link href="/static/css/main/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- //pop-up -->
    <link href="/static/css/main/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
    <link rel="icon" href="/static/images/logo_small.png" >
    <link rel="stylesheet" type="text/css" href="/static/css/main/zoomslider.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/main/style.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/main/navchoose.css"/>
    <link href="/static/css/main/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/main/navchoose.css"/>
    <link rel="icon" href="/static/images/logol_small.png" >
    <script type="text/javascript" src="/static/js/main/modernizr-2.6.2.min.js"></script>


</head>
<body>
<!--/main-header-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="refer_from" action="/" enctype="multipart/form-data">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">图像识别</h4>
                    <p>您是否因为不知道喜爱的图片来自哪部电影而苦恼</p>
                    <p>现在把它传给我们，让我们来帮您寻找</p>
                    <p>您可以选择本地上传或者是填写图片的网络地址</p>
                </div>
                <div class="modal-body">
                    <div class="load-img">
                        <div class="load-active">本地上传</div><div>网络地址上传</div>
                    </div>
                    <div class="clear"></div>
                    <div>
                        <input type="file" id="img_content" name="img" style="margin-top: 10px;">
                        <input class="load-radio" type="radio" name="types" value="1" checked="checked"
                                   style="display: none">
                        <input class="load-radio" type="radio" name="types" value="0" style="display: none">
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" data-toggle="modal" data-target="#myModal2" id="m2" style="display:none;">探索</a>
                    <button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="refer">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="refer_from" action="/" enctype="multipart/form-data">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>

            <p>如果您在使用本网站碰到什么困难，请联系我们</p>
            <p >戴先生：1193248624@qq.com</p>
            <p >陈先生：207239585@qq.com</p>
            <p >左先生：1575304967@qq.com</p>

                </div>
                <div class="modal-body">
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" method="post" action="/" enctype="multipart/form-data">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <p >来自电影：<a id="movie_name">正在识别</a></p>
                    <p >人物信息：<span id="person_name">正在识别</span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning b_close" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>

<span style="display: none;" id="user_id"> {{ user_id }} </span>
<!--/banner-section-->
<div id="demo-1"
     data-zs-src='["/static/images/main/2.jpg", "/static/images/main/1.jpg", "/static/images/main/3.jpg","/static/images/main/4.jpg"]'
     data-zs-overlay="dots">
    <div class="demo-inner-content">
        <!--/header-w3l-->
        <div class="header-w3-agileits" id="home">
            <div class="inner-header-agile">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <h1><a href="/"><span>M</span>square</a></h1>
                    </div>
                    <!-- navbar-header -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="/">主页</a></li>
                            <li>
                                <a href="/picture/home/ ">图集 </a>
                            </li>
                            <li><a href="#" data-toggle="modal" data-target="#myModal">探索</a>

                            </li>
                            <li><a href="#" data-toggle="modal" data-target="#myModal3">联系</a></li>
                            <li class="">
                                <img src="/static/images/m2/avator.png" class="img-circle img1"
                                     style="margin-top: 4px;width: 40px;height: 40px;">
                            </li>
                        </ul>

                    </div>
                    <div class="clearfix"></div>
                </nav>
                <div class="w3ls_search">
                    <div class="cd-main-header">
                        <ul class="cd-header-buttons">
                            <li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
                        </ul> <!-- cd-header-buttons -->
                    </div>
                    <div id="cd-search" class="cd-search">
                        <div class="nav-choose nav-active">电影</div>
                        <div class="nav-choose">图片</div>
                        <form action="/search/" method="get">
                            <input name="content" type="search" placeholder="Search...">
                            <input class="nav-radio" type="radio" name="types" value="0" checked="checked"
                                   style="display: none">
                            <input class="nav-radio" type="radio" name="types" value="1" style="display: none">
                        </form>
                    </div>
                </div>

            </div>

        </div>
        <!--//header-w3l-->
        <!--/banner-info-->
        <div class="baner-info">
            <h3>发掘电影的价值</h3>
        </div>
        <!--/banner-ingo-->
    </div>
</div>
<!--/banner-bottom-->
<div class="w3_agilits_banner_bootm">
    <div class="w3_agilits_inner_bottom">
        <div class="col-md-6 wthree_agile_login">
            <ul>
                <li><i class="fa fa-phone" aria-hidden="true"></i> (+000) 666 666 66</li>
                <li><a href="#" class="login login1" data-toggle="modal" data-target="#myModal4" >登录</a></li>
                <li><a href="#" class="login reg register1" data-toggle="modal" data-target="#myModal5">注册</a></li>
                <li><p  class="welcome" style="display:none;" >欢迎您：</p></li>
                <li><a href="#" class="login-out"  style="display:none;" >注销</a></li>
            </ul>
        </div>
    </div>
</div>
<!--//banner-bottom-->
<!-- Modal1 -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog">

    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>登录</h4>
                <div class="login-form">
                    <form action="/user/login_user/" method="post">
                        <input type="text" name="username" id="username" placeholder="用户名" required="">
                        <input type="password" name="password" id="password" placeholder="密码" required="">
                        <p class="tip"></p>
                        <div class="tp">
                            <input type="button" id="login-click" value="点击登录">
                        </div>
                        <div class="forgot-grid">
                            <div class="log-check">
                                <label class="checkbox"><input type="checkbox" name="checkbox">记住我</label>
                            </div>
                            <div class="forgot">
                                <a href="#" data-toggle="modal" data-target="#myModal2">忘记密码?</a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //Modal1 -->
<!-- Modal1 -->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog">

    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>注册</h4>
                <div class="login-form">
                    <form action="#" method="post">
                        <input type="text" name="name" id="name" placeholder="昵称" required="">
                        <input type="email" name="email" id="email" placeholder="邮箱" required="">
                        <input type="text" name="username" id="username1" placeholder="用户名" required="">
                        <input type="password" name="password" id="password1" placeholder="密码" required="">
                        <input type="password" name="conform password" placeholder="确定密码" required="">
                        <div class="signin-rit">
													<span class="agree-checkbox">
														<label class="checkbox"><input type="checkbox" name="checkbox">我同意 <a
                                                                class="w3layouts-t" href="#" target="_blank">用户条款</a> 和 <a
                                                                class="w3layouts-t" href="#"
                                                                target="_blank">隐私政策</a></label>
													</span>
                            <span id="tip1"></span>
                        </div>
                        <div class="tp">
                            <input type="button" id="register-click" value="点击注册">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //Modal1 -->
<!--/content-inner-section-->
<div class="w3_content_agilleinfo_inner">
    <div class="agile_featured_movies">
        <!--/agileinfo_tabs-->
        <div class="agileinfo_tabs">
            <!--/tab-section-->
            <div id="horizontalTab">
                <ul class="resp-tabs-list">
                    <li>正在热映</li>
                    <li>热门电影</li>
                    <li>热门图片</li>

                </ul>
                <div class="resp-tabs-container">
                    <div class="tab1">
                        <div class="tab_movies_agileinfo">
                            <div class="w3_agile_featured_movies">
                                <div class="col-md-5 video_agile_player" id="new_movie1"></div>
                                <div class="col-md-7 wthree_agile-movies_list " id="new_movies"></div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="cleafix"></div>
                        </div>
                    </div>
                    <div class="tab2">
                        <div class="tab_movies_agileinfo">
                            <div class="w3_agile_featured_movies">
                                <div class="col-md-5 video_agile_player" id="hot_movie1"></div>
                                <div class="col-md-7 wthree_agile-movies_list" id="hot_movies"></div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="cleafix"></div>
                        </div>
                    </div>
                    <div class="tab3 resp-tab-content" aria-labelledby="tab_item-2">
                        <div class="tab_movies_agileinfo">
                            <div class="w3_agile_featured_movies">
                                <div class="col-md-5 video_agile_player" id="hot_picture1"></div>
                                <div class="col-md-7 wthree_agile-movies_list" id="hot_pictures">
                                </div>
                                <div class="clearfix"></div>

                                <div class="cleafix"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--//tab-section-->
            <h3 class="agile_w3_title"> 精选 <span>电影</span></h3>
            <!--/movies-->
            <div class="w3_agile_latest_movies">

                <div id="owl-demo" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
                    <div class="owl-wrapper-outer">
                        <div class="owl-wrapper"
                             style="width: 3420px; left: 0px; display: block; transition: all 1000ms ease 0s;  transform: translate3d(0px, 0px, 0px)">

                        </div>
                    </div>
                    <div class="owl-controls clickable">
                        <div class="owl-pagination">
                            <div class="owl-page"><span class=""></span></div>
                            <div class="owl-page active"><span class=""></span></div>
                            <div class="owl-page"><span class=""></span></div>
                        </div>
                        <div class="owl-buttons">
                            <div class="owl-prev">prev</div>
                            <div class="owl-next">next</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--//movies-->
        <h3 class="agile_w3_title ">为你推荐<span>电影</span></h3>
        <!--/requested-movies-->
        <div class="wthree_agile-requested-movies movie_recomment">
            <div class="clearfix"></div>
        </div>

    </div>
</div>
<!--//content-inner-section-->
<div class="footer">
    <a href="">Ⓒ 2019 Msquare</a>
    <a href="">常见问题解答</a>
    <a href="">服务条款</a>
    <a href="">隐私政策</a>
    <a href="">关于我们</a>
    <a href="">API</a>
</div>
<!--/footer-bottom-->


<script src="/static/js/main/jquery-1.11.1.min.js"></script>
<!-- Dropdown-Menu-JavaScript -->
<script>
    $(document).ready(function () {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
</script>
<!-- //Dropdown-Menu-JavaScript -->

<script type="text/javascript" src="/static/js/main/jquery.zoomslider.min.js"></script>
<!-- search-jQuery -->

<script src="/static/js/main/main.js"></script>
<script type="text/javascript" src="/static/js/main/index.js"></script>
<script src="/static/js/main/simplePlayer.js"></script>
<script>
    $("document").ready(function () {
        $("#video").simplePlayer();
    });
</script>
<script>
    $("document").ready(function () {
        $("#video1").simplePlayer();
    });
</script>
<script>
    $("document").ready(function () {
        $("#video2").simplePlayer();
    });
</script>
<script>
    $("document").ready(function () {
        $("#video3").simplePlayer();
    });
</script>

<!-- pop-up-box -->
<script src="/static/js/main/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box -->
<script>
    $(document).ready(function () {
        $('.w3_play_icon,.w3_play_icon1,.w3_play_icon2').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

    });
</script>
<script src="/static/js/main/easy-responsive-tabs.js"></script>
<script>
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            activate: function (event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
        $('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
    });
</script>
<link href="/static/css/main/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<script src="/static/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/js/main/move-top.js"></script>
<script type="text/javascript" src="/static/js/main/easing.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
        });
    });
</script>
<script src=" https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    // 搜索 cookie 清空
    //这里的test可以是任意的值,反正我们是获取不到这个值的。打印一下，发现获取不到的cookie为null
    $first = $.cookie('test');
    if (!$first || $first == 'null' || $first == null) {
        //第一次进页面，肯定是没有cookie的，所以这里设置cookie的值为1，时间为7天
        $.cookie('test', '1', {expires: 7});
    } else {
        //然后等下次回到页面，肯定会取到cookie的值，然后我们就反其道而行，给cookie赋值为null，同时刷新页面
        $.cookie('test', null);
        location.reload(true);
    }
</script>
<script type="text/javascript">
    // 搜索对象切换
    var nav_active = $('.nav-active');
    var nav_radios = $('.nav-radio');
    $(function () {
        $('.nav-choose').click(function () {
            if (!$(this).hasClass('nav-active')) {
                $('.nav-choose').removeClass('nav-active');
                $(this).addClass('nav-active');
                nav_active = $(this);
                if ($(this).text() == "图片") {
                    nav_radios.eq(0).attr("checked", false);
                    nav_radios.eq(1).attr("checked", true);
                } else {
                    nav_radios.eq(0).attr("checked", true);
                    nav_radios.eq(1).attr("checked", false);
                }

            }
        });
        var load_active = $('.load-active');
        var load_radios = $('.load-radio');
        $('.load-img div').click(function () {
            if (!$(this).hasClass('load-active')) {
                load_active.removeClass('load-active');
                $(this).addClass('load-active');
                load_active = $(this);
                if ($(this).text() != "本地上传") {
                    load_radios.eq(0).attr("checked", false);
                    load_radios.eq(1).attr("checked", true);
                    $('#img_content').attr('type', 'text');
                    $('#img_content').addClass('form-control');
                } else {
                    load_radios.eq(0).attr("checked", true);
                    load_radios.eq(1).attr("checked", false);
                    $('#img_content').attr('type', 'file');
                    $('#img_content').removeClass('form-control');
                }

            }
        })
    })
</script>
<!--end-smooth-scrolling-->
</body>
</html>